<template>
    <van-popup class="task-popup" v-model:show="show" position="bottom" round :style="{ height: '93%' }">
        <!-- 2. 主标题卡片 -->
        <section class="title-card">
            <div class="title-content-placeholder"></div>
            <div class="title-content">
                <h2>天天做任务赚翻租币</h2>
                <p>已获得 <span>3321</span> 个租币，租币可兑换商品</p>
            </div>
            <van-icon @click="show = false" class="close-btn" size="32" name="close" />
        </section>
        <!-- 3. 任务列表内容区 -->
        <main class="task-content">
            <!-- 遍历任务分组 -->
            <div v-for="section in taskSections" :key="section.title">
                <h3 class="section-title">{{ section.title }}</h3>
                <!-- 遍历每个分组下的任务 -->
                <task-item v-for="task in section.tasks" :key="task.id" :task="task" @claim="handleClaimTask"
                    :class="{ 'is-dashed': task.id === 6 }" />
            </div>
            <reward-toast v-model="isToastVisible" :message="toastMessage" />
        </main>
    </van-popup>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import TaskItem from './TaskItem.vue';
import RewardToast from '@/components/RewardToast.vue';
import { useTaskStore } from '@/stores/task'
import { storeToRefs } from 'pinia'
const taskStore = useTaskStore()
// 模拟任务数据
const { taskSections } = storeToRefs(taskStore)
const show = ref(true);
//  Toast 相关的状态
const isToastVisible = ref(false);
const toastMessage = ref(0);
// 用于存储 setTimeout 的 ID，以便在连续点击时清除上一个计时器
let toastTimer: number | undefined = undefined;
// 封装一个显示 Toast 的函数
const showToast = (message: number) => {
    // 如果上一个计时器还在，先清除它
    if (toastTimer) {
        clearTimeout(toastTimer);
    }

    toastMessage.value = message;
    isToastVisible.value = true;

    // 设置一个计时器，3秒后自动隐藏 Toast
    toastTimer = window.setTimeout(() => {
        isToastVisible.value = false;
    }, 1000); // Toast 显示3秒
};

import { useGoldCoinStore } from '@/stores/goldCoins'
const goldCoinStore = useGoldCoinStore()
const { goldCoins } = storeToRefs(goldCoinStore)
// 处理子组件发出的 claim 事件
const handleClaimTask = (taskId: number) => {
    console.log(`领取任务: ${taskId}`);
    // 遍历查找并更新任务状态
    for (const section of taskSections.value) {
        const task = section.tasks.find((t: { id: number }) => t.id === taskId);
        if (task) {
            task.status = 'completed';
            goldCoins.value += task.reward;
            // 3. 调用 showToast 函数，并传入动态生成的消息
            showToast(task.reward);
            break;
        }
    }
};
</script>

<style lang="scss" scoped>
.task-popup{
    display: flex;
    flex-direction: column;
    .title-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(147deg, #7AD38C 0%, #40CBBE 100%);
    color: white;
    padding: 20px;
    border-radius: 16px 16px 0 0;

    .title-content {
        text-align: center;
        color: #FFFFFF;
        font-style: normal;


        h2 {
            font-weight: 500;
            font-size: 22px;
            margin-bottom: 8px;
        }

        p {
            font-weight: 400;
            font-size: 15px;
            color: #FFFFFF;

            span {
                color: #FFF48D;
                font-size: 18px;
            }
        }
    }


    .close-btn {
        position: relative;
        top: -10px;
        left: 5px;
    }
}

.task-content {
    flex: 1;
    padding: 0 15px 34px;
    background-color: #E9FAF4;
    overflow-y: scroll;

    .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #133C37;
        padding: 15px;
    }


}

}

</style>